<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="handleCancel" title="自定义链接" width="700px">
      <el-form ref="linkForm" :model="linkForm" :rules="linkRules" label-width="100px">
        <el-form-item label="链接地址：" prop="link">
          <el-input v-model="linkForm.link" placeholder="http://" style="width:60%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      keyWord: "",
      linkForm: {
        link: ""
      },
      linkRules: {
        link: [
          { required: true, message: "请输入链接地址", trigger: "blur" },
          {
            pattern: /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/,
            message: "请输入正确的网站格式"
          }
        ]
      }
    };
  },
  methods: {
    handleCancel() {
      this.$refs.linkForm.resetFields();
      this.$emit("cancelClick");
    },
    handleConfirm() {
      this.$refs.linkForm.validate(valid => {
        if (valid) {
          this.$emit("confirmClick", {
            link: this.linkForm.link
          });
          this.$refs.linkForm.resetFields();
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.textRadio {
  /deep/.el-radio__label {
    display: none;
  }
}
.table-box {
  margin-top: 20px;
  max-height: 500px;
  overflow: auto;
}
</style>
